<template>
	<view class="content">
		<view class="header">
			<statusBar bgColor="#FFFFFF"></statusBar>
			<view class="header-title">问卷调查</view>
		</view>
		<view class="con">
			<view class="con-header">
				<image class="con-header-img" src="../../static/header.png"/>
			</view>
			<view class="con-main">
				<!-- 姓名 -->
				<view class="con-item">
					<view class="con-item-title">
						<text class="con-item-title-x">*</text>
						<text class="con-item-title-num">01</text>
						<view class="con-item-title-text">请输入姓名</view>
						<view class="con-item-title-optional">【必填】</view>
					</view>
					<view class="con-item-val ipone">
						<uni-easyinput 
							v-model.trim="requiredValue.nameValue" 
							placeholder="请输入姓名"
						></uni-easyinput>
					</view>
				</view>
				<!-- 手机号 -->
				<view class="con-item">
					<view class="con-item-title">
						<text class="con-item-title-x">*</text>
						<text class="con-item-title-num">02</text>
						<view class="con-item-title-text">请输入手机号</view>
						<view class="con-item-title-optional">【必填】</view>
					</view>
					<view class="con-item-val ipone">
						<uni-easyinput 
							v-model.trim="requiredValue.iphoneValue" 
							placeholder="请输入手机号"
							type="number"
						></uni-easyinput>
					</view>
				</view>
				<!-- 通过列表渲染 -->
				<view class="con-item" v-for="(item,index) in questionList" :key="item.id">
					<view class="con-item-title">
						<text class="con-item-title-x" :style="{'opacity':item.required?'1':'0'}">*</text>
						<text class="con-item-title-num">{{functions.add0(item.id)}}</text>
						<view class="con-item-title-text">{{item.questionContent}}</view>
						<view class="con-item-title-optional">【{{item.required ? '必填' : '选填'}}】</view>
					</view>
					<view class="con-item-describe" v-if="item.questionDescribe">
						{{item.questionDescribe}}
					</view>
					<!-- 1 单选题 -->
					<view class="con-item-val single" v-if="item.type == 1">
						<view 
							class="single-item" 
							v-for="(im,ix) in item.optionsList" 
							:key="im.id"
							@click="radioChange(index,im,ix)"
						>
							<view class="img-box" v-if="im.id !== item.singleCurrent">
								<image mode="aspectFit"  class="img-radio" src="../../static/radio.svg"></image>
							</view>
							<view class="img-box" v-else>
								<image mode="aspectFit" class="img-radio" src="../../static/radio-change.svg"></image>
							</view>
							
							<view class="img-text">{{im.optionContent}}</view>
						</view>
					</view>
					<!-- 2 多选题 不超过五个选项展示 -->
					<view class="con-item-val single" v-if="item.type == 2 && item.optionsList.length <= 5">
						<view 
							class="single-item" 
							v-for="(im,ix) in item.optionsList" 
							:key="im.id"
							@click="multipleChange(index,im,ix,item.limitType,item.optionsNum)"
						>
							<view class="img-box" v-if="!item.multipleCurrent.includes(im.id)">
								<image mode="aspectFit"  class="img-radio" src="../../static/radio.svg"></image>
							</view>
							<view class="img-box" v-else>
								<image mode="aspectFit" class="img-radio" src="../../static/multiple-change.svg"></image>
							</view>

							<!-- <image v-if="!item.multipleCurrent.includes(im.id)" class="img-radio" src="../../static/radio.svg"/>
							<image v-else class="img-radio" src="../../static/multiple-change.svg"/> -->
							<view class="img-text">{{im.optionContent}}</view>
						</view>
					</view>
					<!-- 2 多选题 超过五个选项展示 -->
					<view class="con-item-val ipone pop-up" v-if="item.type == 2 && item.optionsList.length > 5">
						<view class="pop-up-input" @click="openPopup(item,index)">
							<!-- {{ getMultipleText(item.multipleCurrent) }} -->
						  <text>{{ getMultipleText(item.multipleCurrent) }}</text>	
						</view>
						<image class="down" src="../../static/down.svg"/>
					</view>
					<!-- 3 图片 -->
					<view class="con-item-val file-img" v-if="item.type == 3">
						<!-- 还没上传图片的样式 -->
						<view class="no-img" v-show="item.multipleCurrent.length == 0" @click="toChoose(index)">
							<view class="no-img-center">
								<view class="no-img-center-top">
									<image src="../../static/file-add.svg"/>
									<text>添加图片</text>
								</view>
								<view class="no-img-center-bottom">图片要求：最多6张</view>
							</view>
						</view>
						<!-- 上传了图片的样式 -->
						<view class="imgs" v-show="item.multipleCurrent.length != 0">
						<!-- <view class="imgs" > -->
							<!-- <uni-file-picker 
								limit="6" 
								title="最多选择6张图片"
								file-mediatype="image"
								:auto-upload="false"
								ref="filesRef"
								@select="select" 
								@progress="progress" 
								@success="success" 
								@fail="fail"
								@delete="deleteF"
							></uni-file-picker> -->
							<view class="img-add" @click="toChoose(index,item)" v-if="item.multipleCurrent.length < 6">
								<image class="img-add-top" src="../../static/add-img.svg"/>
								<text>添加图片</text>
							</view>
							<view class="img-item" v-for="(im,ix) in item.multipleCurrent" :key="item">
								<image class="img-item-img" :src="im.path" mode="aspectFill"/>
								<image class="img-item-del" @click="delImg(index,ix)" src="../../static/img-del.svg"/>
							</view>
							
						</view>
					</view>
					<!-- 4 问答题 -->
					<view class="con-item-val essay-question" v-if="item.type == 4">
						<!-- <uni-easyinput
							type="textarea" 
							v-model="item.inputVal" 
							placeholder="请输入200字以内的备注说明"
							:maxlength="200"
						></uni-easyinput> -->
						<textarea 
							v-model.trim="item.inputVal" 
							class="my-textarea"
							placeholder-style="color:#C9C9C9;font-size:28rpx;font-weight: 400;"
							:placeholder="item.tip || '请输入'"
							:maxlength="200"
						></textarea>
						<view class="count">{{item.inputVal.length}}/200</view>
					</view>
					<!-- 5 文件题 -->
					<view class="con-item-val file-img file-box" v-if="item.type == 5">
						<!-- 还没上传文件的样式 -->
						<view class="no-img" v-show="item.multipleCurrent.length == 0" @click="selectFile(index)">
							<view class="no-img-center">
								<view class="no-img-center-top">
									<image src="../../static/file-add.svg"/>
									<text>添加文件</text>
								</view>
								<view class="no-img-center-bottom">文件要求：无限制</view>
							</view>
						</view>
						<!-- 上传了文件的样式 -->
						<view class="file" v-show="item.multipleCurrent.length != 0" v-for="(im,ix) in item.multipleCurrent" :key="index">
							<image class="file-left" src="../../static/file.svg"/>
							<view class="file-middle">
								<text>{{im.fileName}}</text>
								<text>{{im.uploadTime}}</text>
							</view>
							<image class="file-right" src="../../static/del.svg" @click="deleteFile(index)"/>
						</view>
					</view>
					<!-- 6 手机号 -->
					<view class="con-item-val ipone" v-if="item.type == 6">
						<uni-easyinput 
							v-model.trim="item.inputVal" 
							placeholder="请输入手机号"
							type="number"
						></uni-easyinput>
					</view>
					<!-- 7 身份证号码 -->
					<view class="con-item-val ipone" v-if="item.type == 7">
						<uni-easyinput 
							v-model.trim="item.inputVal" 
							placeholder="请输入身份证号"
						></uni-easyinput>
						<view class="tips">此题涉及隐私信息，请注意核实收集者身份。</view>
					</view>

				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="bottom-btn" v-throttle:click="() => submit()">提交</view>
		</view>

		<!-- 超过五项多选题的弹框 -->
		<uni-popup ref="popupRef" background-color="#ffffff00" @change="popupChange">
			<view class="popup-content">
				<view class="title">选取你的结果</view>
				<view class="list" 
					:style="{ 'padding-bottom': '20rpx' }"
				>
					<view class="list-item" v-for="(item,index) in popupList" :key="item.id" @click="selectItem(item)">
						<view :class="['list-item-text',(questionList[popupEditV.editIndex].multipleCurrent.some(im => im.id === item.id)) ? 'checked' : '']">{{item.optionContent}}</view>
						<image v-if="(questionList[popupEditV.editIndex].multipleCurrent.some(im => im.id === item.id))" class="list-item-img" src="../../static/checked.svg"/>
					</view>
				</view>
				<!-- 如果设置只能选择一个  那底部就没有按钮  如果可以选择多个 就有那妞 -->
				<view class="popup-btn">
					<view class="cancel" @click="cancel">取消</view>
					<view class="canfim" @click="canfim">确定</view>
				</view>
			</view>
		</uni-popup>

		<!-- 提交时出现的提示弹框 -->
		<uni-popup ref="popupCenterRef" background-color="#ffffff00">
			<view class="popup-center">
				<view class="popup-center-title">确定提交你的结果吗？</view>
				<view class="popup-center-btn">
					<view class="popup-center-btn-cancel" @click="cancelSubmit">取消</view>
					<view class="popup-center-btn-sure" v-throttle:click="() => sureSubmit()">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {ref,onMounted,reactive,computed} from 'vue';
	import { getSurvey,addCustomerSurvey } from '@/api/questionnaire.js'
	import functions from '@/utils/functions.js'
	import uploads from '@/utils/uploads.js'
	import uploadFiles from '@/utils/uploadFiles.js';

	const filesRef = ref(null);
	const popupRef = ref(null);
	const popupCenterRef = ref(null);
	const questionList = ref([]); //所有问题列表
	const requiredValue = reactive({
		nameValue:'', //姓名
		iphoneValue:'', //手机号
	});
	const popupList = ref([]);//弹框里面列表数据
	// const singleCurrent = ref(-1);  //单选目前选中的
	// const multipleCurrent = ref([]);  //多选目前选中的
	// const imageValue = ref([]); //选择的图片列表
	// const fileValue = ref([]); //选择的文件列表
	const popupCurrent = ref([]);  //超过五个选项的多选 用来暂存选择的选项
	const popupEditV = reactive({
		editIndex:-1, //弹框当前编辑的题索引index
		oldMultipleCurrent:[], //当前编辑的题 原来选择的选项（如果点击取消按钮则恢复原来的）
		isOk:false, //是否点击了确定按钮
	});  
	// uni.showLoading({
	// 	title: '加载中',
	// 	mask: false
	// });
	
	onMounted(() => {
		
		getSurveyDetails()
	})

	let getMultipleText = computed(() => {
		return (arr) => {
			if(arr.length == 0) return '请选择'
			let textArr = arr.map(item => item.optionContent )
			return textArr.join(' / ')
		}
	})

	const getSurveyDetails = async () => {
		let res = await getSurvey();
		// console.log('查看问卷详情',res)
		questionList.value = res.map((item,index) => {
			let obj = {
				id:index+3,
				...item
			}
			if(item.type == 4 || item.type == 6 || item.type == 7){
				obj.inputVal = ''
			}
			if(item.type == 1){
				obj.singleCurrent = -1;
			}
			if(item.type == 2 || item.type == 3 || item.type == 5){
				obj.multipleCurrent = []
			}

			return obj
		});
	}
	const radioChange = (index,im,ix) => {
		// singleCurrent.value = index
		questionList.value[index].singleCurrent = im.id;
	}
	/**
	 * 多选题选择
	 * {Number} index 题索引
	 * {Object} im 该题的所有选项
	 * {Number} ix 该题目前选择的选项
	 * {Number} limitType 该多选题的选项数量限制类型
	 * {Number} optionsNum 该多选题的选项数量限制类型对象的数量
	 */
	const multipleChange = (index,im,ix,limitType,optionsNum) => {
		let obj = questionList.value[index]
		if(obj.multipleCurrent.includes(im.id)){
			//当前勾选状态 去取消选择
			for(let i=0;i<obj.multipleCurrent.length;i++){
				if(obj.multipleCurrent[i] === im.id){
					questionList.value[index].multipleCurrent.splice(i,1)
					break;
				}
			}
		}else{
			//勾选该选项  需判断 多选限制类型
			if(limitType == 1){
				//不限制选项
				
			}else if(limitType == 2){
				//固定选择
				if(questionList.value[index].multipleCurrent.length == optionsNum){
					return uni.showToast({title: `该题要求固定选择${optionsNum}项`,duration: 2000,icon:'none'});
				}
			}else if(limitType == 3){
				//至少选择

			}else if(limitType == 4){
				//最多选择
				if(questionList.value[index].multipleCurrent.length == optionsNum){
					return uni.showToast({title: `该题要求最多选择${optionsNum}项`,duration: 2000,icon:'none'});
				}
			}
			questionList.value[index].multipleCurrent.push(im.id);
			
		}
	}

	//点击添加图片  触发uni-file-picker的choose方法
	const toChoose = async (index,item) => {
		// console.log('filesRef.value',filesRef.value)
		// filesRef.value.choose()
		let res = await uploads({
			count:6-questionList.value[index].multipleCurrent.length,
		})
		console.log('图片上传结果',res);
		questionList.value[index].multipleCurrent = [...res,...questionList.value[index].multipleCurrent];
	}

	//删除图片
	const delImg = (index,ix) => {
		// console.log('删除',index,ix)
		questionList.value[index].multipleCurrent.splice(ix,1)
		// console.log('questionList.value',questionList.value)
	}

	// 选择文件：
	const select = (e) => {
		// console.log('选择文件：',e)
		imageValue.value.push({
			tempFilePath:e.tempFilePaths[0],
			url:'',//上传到服务器的地址
		})
	}
	// 获取上传进度
	const progress = (e) => {
		// console.log('上传进度：',e)
	}

	// 上传成功
	const success = (e) => {
		// console.log('上传成功',e)
	}

	// 上传失败
	const fail = (e) => {
		// console.log('上传失败：',e)
	}

	// 删除文件
	const deleteF = (e) => {
		// console.log('删除文件：',e)
		let filterList = imageValue.value.filter(item => item.tempFilePath !== e.tempFilePath)
		imageValue.value = filterList
		// console.log('删除后的文件',filterList)
	}


	//点击上传文件
	const selectFile = async (index) => {
		// uni.chooseFile({
		// 	count: 1, //默认100
		// 	extension:['.zip','.doc','.docx','.pdf','.ppt','.pptx','.xls','.xlsx','.txt'],
		// 	success: function (res) {
		// 		console.log('选择的文件 file类型',res.tempFiles[0]);
		// 		//上传到服务器后 添加到fileValue
		// 		fileValue.value.push({
		// 			tempFilePath:res.tempFiles[0],
		// 			url:'',//上传到服务器的地址
		// 		})
		// 		// questionList.value[index].multipleCurrent = 
				
		// 	}
		// });
		let res = await uploadFiles({
			count:1,
			extension:['.zip','.doc','.docx','.pdf','.ppt','.pptx','.xls','.xlsx','.txt'],
		})
		console.log('文件上传结果',res)
		questionList.value[index].multipleCurrent = res
	}

	//删除上传的文件
	const deleteFile = (index) => {
		questionList.value[index].multipleCurrent = []
	}

	//打开弹框
	const openPopup = (item,index) => {
		// console.log('12',)
	 	popupList.value = item.optionsList;
		popupEditV.editIndex = index;
		popupEditV.oldMultipleCurrent = JSON.parse(JSON.stringify(item.multipleCurrent));
		popupRef.value.open('bottom');
		// popupCurrent.value = item.multipleCurrent;
	}

	//选择选项
	const selectItem = (item) => {
		let editMultipleArr = questionList.value[popupEditV.editIndex].multipleCurrent;
		if(editMultipleArr.some(im => im.id === item.id)){
			//取消选择
			for(let i=0;i<editMultipleArr.length;i++){
				if(editMultipleArr[i].id === item.id){
					questionList.value[popupEditV.editIndex].multipleCurrent.splice(i,1)
					break;
				}
			}
		}else{
			let editObj = questionList.value[popupEditV.editIndex];
						//勾选该选项  需判断 多选限制类型
			if(editObj.limitType == 1){
				//不限制选项
				
			}else if(editObj.limitType == 2){
				//固定选择
				if(editObj.multipleCurrent.length == editObj.optionsNum){
					return uni.showToast({title: `该题要求固定选择${editObj.optionsNum}项`,duration: 2000,icon:'none'});
				}
			}else if(editObj.limitType == 3){
				//至少选择

			}else if(editObj.limitType == 4){
				//最多选择
				if(editObj.multipleCurrent.length == editObj.optionsNum){
					return uni.showToast({title: `该题要求最多选择${editObj.optionsNum}项`,duration: 2000,icon:'none'});
				}
			}

			questionList.value[popupEditV.editIndex].multipleCurrent.push(item)
		}
		// console.log('',)
	}

	//多选弹框取消按钮
	const cancel = () => {
		//恢复原来的数组
		// console.log('questionList.value[popupEditV.editIndex]',questionList.value[popupEditV.editIndex])
		// console.log('popupEditV.oldMultipleCurrent',popupEditV.oldMultipleCurrent)
		// popupList.value = [];
		
		popupRef.value.close();
		// popupEditV.editIndex = -1;
		// popupEditV.oldMultipleCurrent = [];
	}

	//多选弹框确定按钮
	const canfim = () => {
		// popupList.value = [];
		popupEditV.isOk = true;
		popupRef.value.close();
		// popupEditV.editIndex = -1;
		// popupEditV.oldMultipleCurrent = [];
	}

	//多选框 change
	const popupChange = (e) => {
		// console.log('多选框发生变化',e)
		// console.log('是否点击了确认',popupEditV.isOk)
		if(!e.show && !popupEditV.isOk){
			//当前弹框取消并且没有点击确定按钮  则恢复原来的选择
			// console.log('恢复原来的选择',popupEditV.oldMultipleCurrent);
			questionList.value[popupEditV.editIndex].multipleCurrent = popupEditV.oldMultipleCurrent;
		}else{
			popupEditV.isOk = false;
		}
	}

	//提交
	const submit = () => {
		// console.log('questionList.value',questionList.value)
		//验证
		if(!requiredValue.nameValue){
			uni.showToast({
				title:'姓名不能为空',
				icon:'none'
			});
			return;
		}
		if(!functions.validatePhone(requiredValue.iphoneValue)){
			uni.showToast({
				title:'手机号格式不正确',
				icon:'none'
			});
			return;
		}
		
		for (let i = 0; i < questionList.value.length; i++) {
			let item = questionList.value[i];
			//必填项
			if(item.required){
				//问答题
				if(item.type == 4 || item.type == 6 || item.type == 7){
					if(!item.inputVal){
						uni.showToast({
							title:'请填写必填项',
							icon:'none'
						});
						return;
					};
					
				}
				//单选
				if(item.type == 1 && item.singleCurrent == -1){
					// item.singleCurrent == -1 没有选择选项
					uni.showToast({
						title:'请选择必填选项',
						icon:'none'
					});
					return;
				}
				//多选
				if(item.type == 2){
					if(item.multipleCurrent.length == 0){
						uni.showToast({
							title:`题号${functions.add0(item.id)}请至少选择一项`,
							icon:'none'
						});
						return;
					}
					if(item.limitType == 1){
						//不限制选项
						
					}else if(item.limitType == 2){
						//固定选择
						if(item.multipleCurrent.length != item.optionsNum){
							uni.showToast({
								title: `题号${functions.add0(item.id)}要求固定选择${item.optionsNum}项`,
								icon:'none'
							});
							return;
						}
					}else if(item.limitType == 3){
						//至少选择
						if(item.multipleCurrent.length < item.optionsNum){
							uni.showToast({
								title: `题号${functions.add0(item.id)}要求至少选择${item.optionsNum}项`,
								icon:'none'
							});
							return;
						}
					}else if(item.limitType == 4){
						//最多选择
						if(item.multipleCurrent.length > item.optionsNum){
							uni.showToast({
								title: `题号${functions.add0(item.id)}要求最多选择${item.optionsNum}项`,
								icon:'none'
							});
							return;
						}
					}
				}
				//图片 文件
				if(item.type == 3 || item.type == 5){
					if(item.multipleCurrent.length == 0){
						uni.showToast({
							title:`题号${functions.add0(item.id)}请至少上传一个文件`,
							icon:'none'
						});
						return;
					}
				}
			}
		}

		popupCenterRef.value.open('center')
	}

	//提交取消
	const cancelSubmit = () => {
		popupCenterRef.value.close()
	}

	//提交确定
	const sureSubmit = async () => {
		// console.log('姓名',requiredValue.nameValue);
		// console.log('手机号',requiredValue.iphoneValue);
		// console.log('questionList',questionList.value);
		
		let data = {
			customerName:requiredValue.nameValue,
			phone:requiredValue.iphoneValue,
			surveyId:questionList.value[0].surveyId
		};
		let questionRequestList = questionList.value.map(item => {
			let returnObj = {
				questionId:item.questionId,
				answerType:item.type
			}
			//问答题
			if(item.type == 4 || item.type == 6 || item.type == 7){
				returnObj.answerContent = item.inputVal
			}
			//单选
			if(item.type == 1){
				returnObj.optionIds = [item.singleCurrent]
			}
			//多选 没超过五项
			if(item.type == 2 && item.optionsList.length <= 5){
				returnObj.optionIds = item.multipleCurrent
			}
			//多选 超过五项
			if(item.type == 2 && item.optionsList.length > 5){
				returnObj.optionIds = item.multipleCurrent.map(item => item.id)
			}
			if(item.type == 3 || item.type == 5){
				returnObj.fileRequests = item.multipleCurrent.map(item => ({
					fileName:item.fileName,
					filePath:item.path
				}))
			}
			return returnObj
		});
		data.questionRequestList = questionRequestList;
		// console.log('数据组装',data)
		let res = await addCustomerSurvey(data);
		// console.log('res 收集结果',res);
		popupCenterRef.value.close();
		uni.showToast({
			title:'提交成功',
			icon:'success'
		});
		uni.redirectTo({
			url: '/pages/submitSuccess/index'
		});
	}

	//提交前验证
	const verification = () => {

	}

</script>

<style scoped lang="scss">
	.content {
		width: 750rpx;
		min-height: 100vh;
		background: #F8F8F8;

		.header{
			width: 750rpx;
			background: white;
			height: calc(var(--status-bar-height) + 88rpx);
			position: fixed;
			top: 0;
			left: 0;
			z-index: 20;

			&-title{
				height: 88rpx;
				font-family: PingFangSC-SNaNrpxibold;
				font-weight: 600;
				font-size: 36rpx;
				color: #1A1A1A;
				@include flex();
				
			}
		}

		.con{
			width: 750rpx;
			padding: calc(var(--status-bar-height) + 108rpx) 24rpx calc(150rpx + env(safe-area-inset-bottom)) 24rpx;
			box-sizing: border-box;
			
			.con-header,.con-header-img{
				width: 702rpx;
				height: 223rpx;
				margin-bottom: 20rpx;
			}

			.con-main{
				width: 100%;
				
				.con-item{
					width: 702rpx;
					background: #FFFFFF;
					border-radius: 16rpx;
					padding: 32rpx 0;
					box-sizing: border-box;
					margin-bottom: 20rpx;
					
					&-title{
						width: 702rpx;
						margin-bottom: 24rpx;
						height: 44rpx;
						@include flex(row,flex-start,flex-start);
						
						&-x{
							height: 44rpx;
							font-family: PingFangSC-Regular;
							font-weight: 400;
							font-size: 28rpx;
							color: #F54040;
							margin-left: 20rpx;
						}

						&-num{
							height: 44rpx;
							font-family: PingFangSC-SNaNrpxibold;
							font-weight: 600;
							font-size: 32rpx;
							color: #222222;
							margin-right: 12rpx;
						}

						&-text{
							height: 44rpx;
							max-width: 500rpx;
							// background: pink;
							font-family: PingFangSC-SNaNrpxibold;
							font-weight: 600;
							font-size: 32rpx;
							color: #222222;
							// background: skyblue;
							line-height: 44rpx;
							@extend %text-overflow;
						}

						&-optional{
							height: 44rpx;
							font-weight: 400;
							font-size: 24rpx;
							color: #b3b3b3;
							// background: pink;
							@include flex(row);
						}
					}

					&-describe{
						width: 100%;
						margin-top: -6rpx;
						padding: 0 32rpx 24rpx 80rpx;
						box-sizing: border-box;
						font-family: PingFangSC-Regular;
						font-weight: 400;
						font-size: 28rpx;
						color: #999999;
						margin-top: 16rpx;
					}

					&-val{
						width: 100%;
						padding: 0 32rpx 0 80rpx;
						box-sizing: border-box;
					}

					::v-deep .uni-easyinput__content{
						background-color: #F5F5F5 !important;
						border: none !important;
						font-weight: 400 !important;
						font-size: 28rpx !important;
					}

					::v-deep .uni-easyinput__content-input{
						font-weight: 400 !important;
						font-size: 28rpx !important;
					}

					::v-deep .uni-easyinput__placeholder-class{
						font-family: PingFangSC-Regular;
						font-weight: 400 !important;
						font-size: 28rpx !important;
						color: #C9C9C9 !important;
						// line-height: 1.5 !important;
					}

					.essay-question{
						position: relative;
						// padding: 0 32rpx 0 32rpx;

						.my-textarea{
							width: 100%;
							height: 300rpx;
							padding: 44rpx 21rpx 60rpx 21rpx;
							margin: 0;
							background: #F8F8F8;
							box-sizing: border-box;
							font-weight: 400;
							font-size: 28rpx;
						}


						// .input-placeholder{
						// 	font-family: PingFangSC-Regular;
						// 	font-weight: 400;
						// 	font-size: 30rpx;
						// 	color: #CCCCCC;
						// }
						
						// ::v-deep .uni-easyinput__content-textarea{
						// 	height: 100rpx !important;
						// 	padding: 44rpx 21rpx 60rpx 21rpx !important;
						// 	margin: 0 !important;
						// 	font-family: PingFangSC-Regular;
						// 	font-weight: 400 !important;
						// 	font-size: 28rpx !important;
						// 	color: #333333 !important;
						// 	min-height:324rpx !important;
						// 	box-sizing: border-box;
						// }

						// ::v-deep .uni-textarea-wrapper{
						// 	width: 100% !important;
						// 	height: 100% !important;
						// 	box-sizing: border-box !important;
						// }

						// ::v-deep .uni-textarea-textarea{
						// 	box-sizing: border-box !important;
						// 	width: 100% !important;
						// 	height: 100% !important;
						// 	padding: 44rpx 21rpx 60rpx 21rpx !important;
						// }

						.count{
							position: absolute;
							bottom: 20rpx;
							right: 52rpx;
							font-family: PingFangSC-Regular;
							font-weight: 400;
							font-size: 24rpx;
							color: #CCCCCC;
						}
					}

					.ipone{
						::v-deep .uni-easyinput__content{
							height: 88rpx !important;
							line-height: 88rpx !important;
						}

						.tips{
							font-family: PingFangSC-Regular;
							font-weight: 400;
							font-size: 24rpx;
							color: #999999;
							margin-top: 16rpx;
						}
					}

					.single{
						.single-item{
							width: 100%;
							// border: 1rpx solid red;
							// background: pink;
							height: 40rpx;
							margin-bottom: 32rpx;
							@include flex(row,flex-start,center);

							.img-box{
								width: 40rpx;
								height: 40rpx;
								// background: pink;
								margin-right: 10rpx;
								@include flex(row);

								.img-radio{
									width: 32rpx;
									height: 32rpx;
								}
							}
							
							
							
							.img-text{
								width: 550rpx;
								height: 40rpx;
								font-family: PingFangSC-Regular;
								font-weight: 400;
								font-size: 28rpx;
								color: #222222;
								line-height: 40rpx;
								@extend %text-overflow;
							}
						}

						.single-item:last-child{
							margin-bottom: 0;
						}
					}

					.file-img{
						.no-img{
							width: 590rpx;
							height: 180rpx;
							background: #FFFFFF;
							border: 1rpx solid #E0E0E0;
							border-radius: 4rpx;
							@include flex();
							
							.no-img-center{
								width: 220rpx;
								height: 84rpx;
								// background: pink;
								@include flex(column,space-between,center);
								
								&-top{
									height: 40rpx;
									// background: pink;
									@include flex(row,center,center);
									image{
										width: 24rpx;
										height: 24rpx;
										margin-right: 20rpx;
									}

									text{
										font-family: PingFangSC-Regular;
										font-weight: 400;
										font-size: 28rpx;
										color: #333333;
									}
								}

								&-bottom{
									font-family: PingFangSC-Regular;
									font-weight: 400;
									font-size: 24rpx;
									color: #999999;
								}
							}
						}
						.imgs{
							// border: 1rpx solid red;
							@include flex(row,flex-start,flex-start,wrap);

							.img-item{
								width: 158rpx;
								height: 158rpx;
								position: relative;
								margin-bottom: 16rpx;
								margin-right: 16rpx;

								.img-item-img{
									width: 158rpx;
									height: 158rpx;
									border-radius: 8rpx;
								}

								.img-item-del{
									position: absolute;
									top: 8rpx;
									right: 8rpx;
									width: 32rpx;
									height: 32rpx;
								}
							}

							.img-add{
								width: 158rpx;
								height: 158rpx;
								border-radius: 8rpx;
								border: 1rpx solid #DDDDDD;
								box-sizing: border-box;
								margin-right: 16rpx;
								margin-bottom: 16rpx;
								padding: 39rpx 0 33rpx 0;
								box-sizing: border-box;
								@include flex(column,space-between,center);

								.img-add-top{
									width: 48rpx;
									height: 42rpx;
								}

								>text{
									font-family: PingFangSC-Regular;
									font-weight: 400;
									font-size: 24rpx;
									color: #999999;
								}
							}
						}
					}

					.file-box{
						// height: 153rpx;
						// @include flex(row,space-between,center);

						.file{
							width: 100%;
							height: 153rpx;
							box-sizing: border-box;
							// background: pink;
							padding: 32rpx 0;
							@include flex(row,space-between,center);

							.file-left{
								width: 88rpx;
								height: 88rpx;
								margin-right: 32rpx;
							}

							.file-middle{
								width: 430rpx;
								height: 100%;
								// background: skyblue;
								margin-right: 20rpx;
								@include flex(column,space-between,flex-start);

								>text:first-child{
									font-family: PingFangSC-Medium;
									font-weight: 500;
									font-size: 28rpx;
									color: #222222;
								}

								>text:last-child{
									font-family: PingFangSC-Regular;
									font-weight: 400;
									font-size: 22rpx;
									color: #999999;
								}
							}

							.file-right{
								width: 40rpx;
								height: 40rpx;
							}
						}
					}

					.pop-up{
						// background: pink;
						position: relative;
						z-index: 10;

						.pop-up-input{
							width: 472rpx;
							height: 88rpx;
							background: #F5F5F5;
							padding-left: 28rpx;
							padding-right: 90rpx;
							// box-sizing: border-box;
							font-family: PingFangSC-Regular;
							font-weight: 400;
							font-size: 28rpx;
							color: #C9C9C9;
							border-radius: 4rpx;
							@extend %text-overflow;
							@include flex(row,flex-start);
						}

						.pop-up-input>text{
							@extend %text-overflow;
						}

						.down{
							width: 24rpx;
							height: 24rpx;
							position: absolute;
							right: 64rpx;
							top: 32rpx;
						}
					}
				}
			}

			
		}

		.bottom{
			width: 750rpx;
			height: calc(136rpx + env(safe-area-inset-bottom));
			background: #FFFFFF;
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 20;
			padding-top: 20rpx;
			box-sizing: border-box;

			.bottom-btn{
				width: 670rpx;
				height: 96rpx;
				background: #1E55F0;
				border-radius: 8rpx;
				font-family: PingFangSC-SNaNrpxibold;
				font-weight: 600;
				font-size: 32rpx;
				color: #FFFFFF;
				margin: auto;
				@include flex(row);
			}
		}
	}

	.popup-content{
		.title{
			width: 750rpx;
			height: 130rpx;
			background: #ffffff;
			border-radius: 24rpx 24rpx 0 0;
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 36rpx;
			color: #222222;
			@include flex();
		}

		.list{
			width: 750rpx;
			background: white;
			max-height: 700rpx;
			overflow-y: scroll;
			padding-bottom: 20rpx;

			.list-item{
				width: 750rpx;
				height: 112rpx;
				background: #FFFFFF;
				padding: 0 40rpx;
				box-sizing: border-box;
				@include flex(row,space-between);

				.list-item-text{
					font-family: PingFangSC-Regular;
					font-weight: 400;
					font-size: 32rpx;
					color: #222222;
					width: 580rpx;
					// background: palegoldenrod;
					@extend %text-overflow;
				}

				.checked.list-item-text{
					font-family: PingFangSC-SNaNrpxibold;
					font-weight: 600;
					font-size: 32rpx;
					color: #4974F5;
				}

				.list-item-img{
					width: 32rpx;
					height: 32rpx;
				}
			}
		}

		.popup-btn{
			width: 750rpx;
			height: 136rpx;
			background: #FFFFFF !important;
			padding: 0 40rpx;
			box-sizing: border-box;
			@include flex(row,space-between,center);

			>view{
				width: 327rpx;
				height: 96rpx;
				background: #F5F5F5;
				border-radius: 8rpx;
				@include flex();
			}

			>.cancel{
				font-family: PingFangSC-SNaNrpxibold;
				font-weight: 600;
				font-size: 32rpx;
				color: #555555;
			}

			>.canfim{
				background: #4974F5;
				font-family: PingFangSC-SNaNrpxibold;
				font-weight: 600;
				font-size: 32rpx;
				color: #FFFFFF;
			}
		}
	}

	.popup-center{
		width: 540rpx;
		height: 226rpx;
		background: #ffffff;
		border-radius: 24rpx;
		overflow: hidden;

		&-title{
			width: 540rpx;
			height: 132rpx;
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 36rpx;
			color: #1A1A1A;
			@include flex(row);
			border-bottom:2rpx solid #F0F0F0;
		}

		&-btn{
			width: 540rpx;
			height: 96rpx;
			@include flex(row,flex-start);

			>view{
				width: 270rpx;
				height: 96rpx;
				box-sizing: border-box;
				@include flex(row);
			}

			&-cancel{
				font-family: PingFangSC-Regular;
				font-weight: 400;
				font-size: 32rpx;
				color: #222222;
				border-right:2rpx solid #F0F0F0;
			}
			&-sure{
				font-family: PingFangSC-SNaNrpxibold;
				font-weight: 600;
				font-size: 32rpx;
				color: #4974F5;
			}

		}
	}

	
</style>
